<!--suppress CssUnusedSymbol, JSUnusedGlobalSymbols -->
<template>
  <div class="wrapper" :style="wrapperStyle">
    <el-upload ref="upload" action="#" list-type="picture-card" :auto-upload="false" :multiple="true"
        :drag="true" :file-list="fileList" :limit="10" :on-change="handleFileChange">
      <i slot="default" class="el-icon-plus"/>
      <div slot="file" slot-scope="{file}">
        <!--suppress HtmlUnknownTarget -->
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
        <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
          <i class="el-icon-zoom-in"/>
        </span>
        <span v-if="!downloadDisabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
          <i class="el-icon-download"/>
        </span>
        <span v-if="!removeDisabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
          <i class="el-icon-delete"/>
        </span>
      </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <!--suppress HtmlUnknownTarget -->
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { downloadUrlFile } from '@/utils/FileUtils'

export default {
  name: 'PartImageSelector',
  props: {
    width: {
      type: String,
      required: false,
      default: '100%'
    },
    fileList: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      dialogImageUrl: '#',
      downloadDisabled: false,
      removeDisabled: false,
      addFileList: [],
      removeFileList: []
    }
  },
  computed: {
    wrapperStyle () {
      return {
        width: this.width
      }
    }
  },
  methods: {
    /**
       * 预览图片
       * @param file 图片文件
       */
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /**
     * 下载文件
     */
    handleDownload (file) {
      if (file && file.url) {
        const url = file.url
        const fileName = url.toString().substring(url.lastIndexOf('/') + 1)
        downloadUrlFile(url, fileName)
      }
    },
    /**
     * 文件移除时触发
     * @param file 改变的文件
     */
    handleRemove (file) {
      this.fileList.forEach(item => {
        if (item.uid === file.uid) {
          // 是初始中的图片文件，则添加到removeFileList中
          this.removeFileList.push(item)
        }
      })
      this.addFileList.forEach((item, index) => {
        if (item.uid === file.uid) {
          this.addFileList.splice(index, 1)
        }
      })
      this.$refs.upload.handleRemove(file)
    },
    /**
     * 文件改变时触发，包括添加文件，文件上传成功，文件上传失败，由于这里只用于选择文件，因此只存在添加文件的可能
     * @param file 改变的文件
     * @param fileList 当前选择的文件，包括初始化的文件
     */
    handleFileChange (file, fileList) {
      this.addFileList.push(file)
    },
    /**
     * 获取初始化列表
     * @return Array 初始化李彪
     */
    getInitFileList () {
      return this.fileList
    },
    /**
     * 获取需要移除的列表
     * @return Array 需要移除的列表
     */
    getRemoveFileList () {
      return this.removeFileList
    },
    /**
     * 获取需要添加的列表
     * @return Array 需要添加的列表
     */
    getAddFileList () {
      const fileList = []
      this.addFileList.forEach(item => {
        fileList.push(item.raw)
      })
      return fileList
    },
    /**
     * 刷新数据
     */
    fresh () {
      this.dialogVisible = false
      this.dialogImageUrl = '#'
      this.downloadDisabled = false
      this.removeDisabled = false
      this.addFileList = []
      this.removeFileList = []
    }
  }
}
</script>

<style lang="css">
  .el-upload-dragger {
    height: 148px;
    width: 168px;
  }
</style>

<style lang="scss" scoped>

  .wrapper {
    padding: 10px 32px 22px;
  }

</style>
